<template>
  <div>
    <button @click="com='UserAccount'">用户账号组件</button>|
    <button  @click="com='Userinfo'">用户信息组件</button>
    <!-- 动态组件:component
    解决的问题:在同一个地方,多个组件切换显示
    通过 is 来指定组件名称及可实现切换 -->
    
    <component :is="com"></component>
  </div>
</template>

<script>
import UserAccount from './components/UserAccount.vue'
import Userinfo from './components/Userinfo.vue'
export default {
  components: { UserAccount, Userinfo },
data (){
  return{
    com:'UserAccount'
  }
}
}
</script>

<style>

</style>